<template>
	<view class="lock_wrapper">
		<view class="lock__top_wrap"></view>
		<view class="lock__header_wrap">
			<view class="lock__asset_wrap">
				<view class="lock__asset_left">
					<view class="lock_title">锁仓上限(PCD)</view>
					<view class="lock_count">{{$util.roundNumber(lockWarehourseData.available,2)}} PCD</view>
				</view>
				<view class="lock__asset_right">
					<view class="lock_title">锁仓中数量(PCD)</view>
					<view class="lock_count">{{$util.roundNumber(lockWarehourseData.hold,2)}} PCD</view>
				</view>
			</view>
			<view class="lock_number--title">
				<view>
					<text>锁仓数量</text>
					<text v-if='lockWarehourseData.mini_lock_num'>(最低锁仓数为{{lockWarehourseData.mini_lock_num}})</text>
				</view>
				<text @click="setAllLock" class="lock_number--btn">全部锁仓</text>
			</view>
			<view class="lock_number--count">
				<input type="text" v-model="needLockNumber" placeholder="请输入锁仓数" />
				<text class="lock_number--unit">PCD</text>
				<text class="lock_number--tips">预计一个工作日内完成锁仓</text>
			</view>
			<view class="lock_btn" @click="onLockWarehourse">锁仓</view>
		</view>

		<view class="lock__list_record">
			<view class="list_title">锁仓记录</view>
			<view class="list_content" v-if="lockWarehourseData.data">
				<view class="content_item" v-for="item in lockWarehourseData.data" :key="item.id">
					<view class="item_number">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/wallet/withdraw.png"></image>
							<text>数额</text>
						</view>
						<text class="item_title--number">{{$util.roundNumber(item.lock_amount,2)}}PCD</text>
					</view>
					<view class="item_date">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/wallet/submitDate.png"></image>
							<text>申请提交时间</text>
						</view>
						<text class="submit_date">{{$util.FormatDate(item.create_time)}}</text>
					</view>
					<view class="item_status">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/wallet/amount.png"></image>
							<text>状态</text>
						</view>
						<view class="status_handle">
							<text>{{$util.FormatStatus(item.status)}}</text>
							<text :class="{'status__btn_handle':true,'status__btn_disabled':item.status>=2}" @click="revokeLock(item)">撤销</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="content_null" v-else>
				暂无记录
			</view>
			
			<!-- 分页 -->
			<view class="pagination_wrap" v-if="lockWarehourseData.count && lockWarehourseData.count!==0">
				<view class="pagination_left" @click="onPagination('previous')">
					<uni-icon type="back" color="#999999" size="20"></uni-icon>
				</view>
				<view class="pagination_text">{{currentPage + '/' + sumPage}}</view>
				<view class="pagination_right" @click="onPagination('next')">
					<uni-icon type="forward" color="#999999" size="20"></uni-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	export default {
		data() {
			return {
				needLockNumber:'', //需要锁仓的数量
				lockWarehourseData:{},  //锁仓数据
				currentPage: 1, // 当前页
				limitPage: 10 // 每页展示条数
			}
		},
		computed: {
			sumPage() {				
				return this.lockWarehourseData.count ? Math.ceil(this.lockWarehourseData.count / this.limitPage) : 1
			}
		},
		onReady() {
			this.LockWarehourseRecord()
		},
		onPullDownRefresh(){
			this.LockWarehourseRecord()
		},
		methods: {
			// 锁仓操作
			onLockWarehourse() {
				if (this.needLockNumber == '') {
					uni.showToast({
						title:'请输入锁仓数量',
						icon:'none'
					});
					return;
				};
				if (this.needLockNumber == '0') {
					uni.showToast({
						title:'锁仓数不能为0',
						icon:'none'
					});
					return;
				};
				if (parseInt(this.needLockNumber) != parseFloat(this.needLockNumber) ) {
					uni.showToast({
						title:'锁仓数量必须为整数',
						icon:'none'
					});
					return;
				};
				if (parseInt(this.needLockNumber) > 1000000) {
					uni.showToast({
						title:'数额不能大于100万',
						icon:'none'
					});
					return;
				};
				uni.showLoading();
				this.$api.lockWarehourse({
					number: this.needLockNumber
				}, res=> {
					if (res.data.type == 'ok') {
						this.LockWarehourseRecord()
						this.needLockNumber = ''
					}
					uni.hideLoading();
					uni.showToast({
						title:res.data.message,
						icon:'none'
					});	
				})
			},
			
			// 锁仓记录
			LockWarehourseRecord(){
				this.$api.LockWarehourseRecord({
					limit: this.limitPage,
					page: this.currentPage
				}, res => {
					uni.stopPullDownRefresh()
					if (res.data.type == 'ok') {
						this.lockWarehourseData = res.data.message
					}else{
						uni.showToast({
							title:res.data.message,
							icon:'none'
						});		 
					}
				})
			},
			
			// 撤销锁仓
			revokeLock(item){
				if(item.status > 1){
					return
				}
				this.$api.revokeLock({
					id:item.id
				},res=>{
					if (res.data.type == 'ok') {
						this.LockWarehourseRecord()	  
					}
					uni.showToast({
						title:res.data.message,
						icon:'none'
					});	
				})
			},
			
			// 全部锁仓
			setAllLock(){
				this.needLockNumber = this.lockWarehourseData.available
			},
			
			// 分页
			onPagination(arg) {
				if (arg === "previous") {
					if (this.currentPage > 1) {
						this.currentPage--
					} else {
						return
					}
				} else {
					if (this.currentPage < this.sumPage) {
						this.currentPage++
					} else {
						uni.showToast({
							title: '没有更多了',
							icon: 'none'
						})
						return
					}
				}
				this.LockWarehourseRecord()
			},
		},
		components: {
			uniIcon
		}
	}
</script>

<style lang="scss" scoped>
	.lock_wrapper{
		height: 100vh;
	}
	.lock__top_wrap{
		height:120upx;
		background-color: #25263D;
	}
	.lock__header_wrap {
		height:656upx;
		width:92%;
		margin:-100upx auto 0 auto;
		box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.08);
		border-radius:10upx;
		background-color:#FFFFFF;
		overflow: hidden;
		.lock__asset_wrap {
			height: 100upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top:70upx;
			.lock__asset_left,
			.lock__asset_right {
				width: 50%;
				text-align: center;

				.lock_title {
					font-size: 12px;
					color: #999999;
				}

				.lock_count {
					font-size: 18px;
				}
			}
			.lock__asset_left{
				position: relative;
			}
			.lock__asset_left:after{
				@include border__line_bgwhite--right;
			}
		}
		
		.lock_number--title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:0 30upx;
			margin-top:120upx;
			font-size:13px;
			.lock_number--btn{
				color: #E13E4D;
			}
		}
		.lock_number--count{
			position:relative;
			padding:0 30upx;
			input{
				position: relative;
				height: 50upx;
				margin-top:20upx;
				font-size: 13px;
			}
			input:after{
				@include border__line_bgwhite--bottom;
			}
			.lock_number--unit{
				position:absolute;
				top:0;
				right:30upx;
				font-size: 13px;
			}
			.lock_number--tips{
				font-size: 10px;
				color: #999999;
			}
		}
		.lock_btn{
			width:92%;
			height:80upx;
			line-height: 80upx;
			text-align: center;
			background-color:#E13E4D;
			border-radius: 80upx;
			margin:62upx auto 0 auto;
			font-size: 18px;
			color: #FFFFFF;
		}
	}

	.lock__list_record {
		.list_title{
			width:92%;
			margin:0 auto;
			height: 80upx;
			line-height: 80upx;
			padding-left:19upx;
			font-size: 15px;
		}
		.list_content{
			.content_item{
				width:92%;
				margin:0 auto 20upx auto;
				background-color:#FFFFFF;
				padding:0 40upx 0 19upx;
				box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.1);
				border-radius:10upx;
				box-sizing: border-box;
				.item_number,.item_date,.item_status{
					position: relative;
					display:flex;
					justify-content:space-between;
					align-items:center;
					height:79upx;
					font-size:13px;
					.item_title{
						display:flex;
						align-items:center;
						image{
							width:26upx;
							height:26upx;
							margin-right:10upx;
						}
					}
					.item_title--number{
						color:#E03E4D;
					}
					.submit_date{
						color:#999999;
					}
					.status_handle{
						color:#999999;
						.status__btn_handle {
							padding: 6upx 30upx;
							margin-left: 20upx;
							border-radius: 40upx;
							background-color: #E13E4D;
							color: #FFFFFF;
						}
						
						.status__btn_disabled {
							background-color: #999999;
						}
					}
				}
				.item_number:after{
					@include border__line_bgwhite--bottom;
				}
			}
		}
		
		.content_null {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top:100upx;
			color:#666666;
		}
	}
	
	.pagination_wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;
		margin:40upx auto;
		.pagination_left,
		.pagination_right {
			padding: 0 10upx;
			border-radius: 10upx;
			border: 1px solid #BBBBBB;
		}
	}
</style>
